<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="6" v-for="(item, index) in stats" :key="index">
        <a-card :title="item.title" :bordered="false">
          <div class="stat-value">{{ item.value }}</div>
          <div class="stat-desc">{{ item.desc }}</div>
        </a-card>
      </a-col>
    </a-row>
    
    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="收入趋势" :bordered="false">
          <div id="income-chart" style="height: 300px"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="支出分布" :bordered="false">
          <div id="expense-chart" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const stats = ref([
  { title: '总用户数', value: '1,234', desc: '较上月增长12%' },
  { title: '活跃用户', value: '789', desc: '较上月增长5%' },
  { title: '总收入', value: '¥56,789', desc: '较上月增长8%' },
  { title: '总支出', value: '¥34,567', desc: '较上月增长3%' }
]);

onMounted(() => {
  initCharts();
});

const initCharts = () => {
  // 收入趋势图
  const incomeChart = echarts.init(document.getElementById('income-chart'));
  incomeChart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { 
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [8200, 9320, 9010, 9340, 12900, 13300, 13200],
      type: 'line',
      smooth: true
    }]
  });
  
  // 支出分布图
  const expenseChart = echarts.init(document.getElementById('expense-chart'));
  expenseChart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: '70%',
      data: [
        { value: 1048, name: '餐饮' },
        { value: 735, name: '交通' },
        { value: 580, name: '购物' },
        { value: 484, name: '娱乐' },
        { value: 300, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });
};
</script>

<style scoped>
.dashboard-container {
  padding: 16px;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
}
.stat-desc {
  color: #999;
}
</style>